<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Push Notification with quota management - ServiceWorker Cookbook</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      font-family: monospace;
      font-size: 1rem;
      white-space: pre-wrap;
    }

    span {
      color: red;
    }
  </style>
</head>
<body>
<p>This demo allows you to experiment with the quota management rules enforced by browsers.

The browser will likely reduce the quota assigned to you if you send too many notifications not visible to the user, or if the user dismisses your visible notifications.
Try closing this page after selecting one of the two options ("visible" or "invisible") with a high number of notifications.</p>

<ul>
  <li>If you selected visible notifications, you will see them appear one after another on your screen. The quota will not be enforced;</li>
  <li>If you selected invisible notifications, you won't see them on your screen, but you will see the number at the bottom of this page updated once you re-open the page to indicate how many invisible notifications were sent before reaching the quota.</li>
</ul>

<form>
Number of notifications to send: <input id="notification-num" type="number" value="50"></input>
</form>

<button id="visible">Visible notifications</button> <button id="invisible">Invisible notifications</button>

<p>Received <span id="sent-visible">0</span> visible notifications
Received <span id="sent-invisible">0</span> invisible notifications</p>
<button id="clear">Clear</button>

<script src="/tools.js"></script>
<script src="./index.js"></script>
</body>
</html>
